<template>
    <van-nav-bar title="分类" fixed />
    <div style="margin-top: 50px;"></div>
    <!-- 大div    -->
    <div>
        <!-- 左 -->
        <div class="zuo" style="float: left;">
            <van-sidebar v-model="active">
                <van-sidebar-item v-for="item in flData" :title="item.cat_name" />
            </van-sidebar>
        </div>
        <!-- 右 -->
        <div class="you">
            <div v-for="item in flData[active]?.children">
                <h4>{{ item.cat_name }}</h4>
                <!-- 宫格 -->
                 <router-link  :to="'/goods/'+item.cat_id">
                     <van-grid :column-num="3">
                    <van-grid-item v-for="value in item.children" :key="value" :icon="value.cat_icon" 
                    :text="value.cat_name" />
                </van-grid>
                 </router-link>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { flApi } from '@/api/api'
let active = ref(0)
const flData = ref([])
flApi().then(res => {
    console.log('分类', res)
    flData.value = res.data.message
})
</script>

<style lang="scss" scoped></style>